<template>
  <div class="user-identity-wrapper">
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :disabled="dialogData.isView"
      :model="dialogData.itemInfo"
      label-width="100px"
      label-suffix=" :"
      :hide-required-asterisk="dialogData.isView"
    >
      <el-form-item>
        <UploadImg v-model:imageUrl="dialogData.itemInfo.idFront" :disabled="true" :file-size="1" width="300px" height="180px">
          <template #tip> 证件照1 </template>
        </UploadImg>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="dialogData.itemInfo.name" placeholder="请填写用户姓名" clearable></el-input>
      </el-form-item>

      <el-form-item label="身份证号">
        <el-input v-model="dialogData.itemInfo.idNumber" placeholder="请填写身份证号" clearable></el-input>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-input v-model="dialogData.itemInfo.birthDay" placeholder="请选择日期"></el-input>
      </el-form-item>
    </el-form>
    <div class="opt-wrapper">
      <el-button :icon="Check" type="primary" size="large" :loading="btnLoading" @click="handleAduit('Y')">认证通过</el-button>
      <el-button :icon="Close" type="danger" :loading="btnLoading" @click="handleAduit('N')">认证不通过</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { UserIdentityEntity } from "@/biz/interface/UserType";
import { getUserIdentityApi, handleUserIdentityPassApi, handleUserIdentityRefuseApi } from "@/api/modules/sys/user";
import { Check, Close } from "@element-plus/icons-vue";
import UploadImg from "@/components/Upload/Img.vue";

const rules = reactive({
  name: [{ required: true, message: "请填写角色名称", trigger: "blur" }]
});

//页面的数据
interface UserDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  //是否是查看状态，查看状态是不可以提交数据  isView: false,
  isView: boolean;
  // 当前的工友
  workerId: string;
  //当前的数据对象
  itemInfo: UserIdentityEntity;
}

//提交按钮，避免多次提交
const btnLoading = ref(false);
// 弹出框的参数
const dialogData = reactive<UserDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  isView: false,
  workerId: "",
  itemInfo: {
    name: ""
  }
});

// 接收父组件传过来的参数
const acceptParams = (params: UserDialogOption): void => {
  console.log("当前的数据:", params);

  dialogData.optType = params.optType;
  dialogData.workerId = params.workerId;
  dialogData.isView = dialogData.optType === OptEnum.VIEW;

  initItemInfo();
  if (dialogData.workerId) {
    getItemInfo(dialogData.workerId);
  }
  // console.log("当前的数据:", dialogData);
  //   dialogVisible.value = true;
};

const initItemInfo = (): void => {
  dialogData.itemInfo = {
    name: ""
  };
};

const getItemInfo = async (workerId: string) => {
  if (workerId) {
    //通过接口获取数据
    let { data } = await getUserIdentityApi({ workerId });
    // console.log("接收到服务器端的数据", data);
    dialogData.itemInfo = data as unknown as UserIdentityEntity;
  }
};

// 页面事件
const emits = defineEmits(["refresh-list"]);
const handleAduit = async (flag: string) => {
  // console.log("通过审核标记", flag);
  if (dialogData.itemInfo.id) {
    if (flag == "Y") {
      let res = await handleUserIdentityPassApi({ id: dialogData.itemInfo.id });
      if (res.data) {
        ElMessage.success({ message: "用户认证通过" });
        // dialogVisible.value = false;
      }
    } else if (flag == "N") {
      let res = await handleUserIdentityRefuseApi({
        id: dialogData.itemInfo.id
      });
      if (res.data) {
        ElMessage.error({ message: "用户认证不通过" });
        // dialogVisible.value = false;
      }
    }
    //刷新列表数据
    // eslint-disable-next-line vue/custom-event-name-casing
    emits("refresh-list");
  }
};

// // 提交数据（新增/编辑）
// const ruleFormRef = ref<FormInstance>();
// const handleSubmit = () => {
//   btnLoading.value = true;
//   ruleFormRef.value!.validate(async (valid) => {
//     if (!valid) {
//       btnLoading.value = false;
//       return;
//     }
//     try {
//       if (
//         dialogData.optType === OptEnum.CREATE ||
//         dialogData.optType === OptEnum.EDIT
//       ) {
//         let res = await saveRoleApi(dialogData.itemInfo);
//         if (res.data) {
//           ElMessage.success({ message: `${dialogData.title}角色成功！` });
//           //刷新列表数据
//           emits("refresh-list");
//           dialogVisible.value = false;
//         }
//       }
//     } catch (error) {
//       // console.log(error);
//     } finally {
//       btnLoading.value = false;
//     }
//   });
// };

defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.opt-wrapper {
  // border: 1px solid red;
  margin: 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
</style>
